<template>
    <div class="home">
        <!-- 搜索框 -->
        <Search></Search>
        <!-- 轮播图 -->
        <Swiper></Swiper>
        <!-- 商品列表 -->
        <List :shoplist="shoplist" :sortIndex="sortIndex" @deliverIndex="doodSrot"></List>
    </div>
</template>

<script>
// 导入组件
import Search from '../../components/Home/Search.vue'
import Swiper from '../../components/Home/Swiper.vue'
import List from '../../components/Home/List.vue'
// 导入分装好的axios
import {shop_list} from '../../components/utils/api'
export default {
    data(){
        return {
            sortIndex:0,
            shoplist:[], //存储后端传过来的数据
        }
    },
    mounted(){//这个方法会在组件挂载完成时，自动执行，而且只执行一次
       // 请求 店铺列表
        shop_list().then((res)=>{
         this.shoplist=res.data.list;
    })
    },
    methods:{ //定义方法
        //用正则过滤字符串
        zhuanshu(str){
          var reg=/^\d$/
          var str1='';
          for(var i=0;i<str.length;i++){
            if(reg.test(str.charAt(i))){
              str1+=str.charAt(i);
            }
          }
          return str1;
        },
        //点击排序
        doodSrot(index){
          this.sortIndex=index;
          if(index==0){
            this.shoplist.sort((a,b)=>{
              return parseInt(b.wmPoiScore)-parseInt(a.wmPoiScore);
            })
          }else if(index==1){
            this.shoplist.sort((a,b)=>{
              return parseInt(a.distance)-parseInt(b.distance);
            })
          }else if(index==2){
            this.shoplist.sort((a,b)=>{
               return parseInt(this.zhuanshu(b.monthSalesTip)) -parseInt(this.zhuanshu(a.monthSalesTip));
            })
          }
         }
    },
    // 导入组件
    components:{
        Search,
        Swiper,
        List
    }
}
</script>

<style lang="scss">
     *{
    margin: 0;
    padding: 0;
  }
  #home{
    margin-bottom: 70px;
  }
</style>